<template>
  <div class="bom">
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="110px">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-form-item label="工时模式">
              <el-select v-model="form.model" placeholder="">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="计算工艺线工时">
              <el-input v-model="form.time" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="计算工序线工时">
              <el-input v-model="form.time" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="计算产线工时">
              <el-input v-model="form.time" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary">刷新</el-button>
            <el-button type="success">保存</el-button>
            <el-button type="">关闭</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-form :model="form2" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="编号">
              <el-input v-model="form2.num" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="名称">
              <el-input v-model="form2.name" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分类">
              <el-select v-model="form2.type" placeholder="">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工厂/公司">
              <el-select v-model="form2.company" placeholder="">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 物料编号、物料分类、单位、颜色、厚度(cm)、克重(g)、型号、形状、规格、配比、幅宽、密度、纱支、纱织密度、成分、成分比率 -->
      <el-table :data="data">
        <el-table-column label="">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="物料编号" prop="num" />
        <el-table-column label="物料分类" prop="name" />
        <el-table-column label="单位" prop="unit" />
        <el-table-column label="颜色" prop="color" />
        <el-table-column label="厚度(cm)" prop="thickness" />
        <el-table-column label="克重(g)" prop="weight" />
        <el-table-column label="型号" prop="model" />
        <el-table-column label="形状" prop="shape" />
        <el-table-column label="规格" prop="spec" />
        <el-table-column label="配比" prop="ratio" />
        <el-table-column label="幅宽" prop="width" />
        <el-table-column label="密度" prop="density" />
        <el-table-column label="纱支" prop="gauge" />
        <el-table-column label="纱织密度" prop="gauge" />
        <el-table-column label="成分" prop="component" />
        <el-table-column label="备注" prop="remark" />
      </el-table>
      <div>
        <span class="el-icon-plus" />
        <span class="el-icon-minus" />
      </div>
      <el-form :model="form3">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="品质系数(工时)" label-width="110px">
              <el-input
                v-model="form3.qualityCoefficient"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="其他管理系数(工时)" label-width="135px">
              <el-input
                v-model="form3.otherCoefficient"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="管理系数" label-width="80px">
              <el-input
                v-model="form3.managementCoefficient"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="标准品换算系数" label-width="110px">
              <el-input
                v-model="form3.standardCoefficient"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="其他系数" label-width="80px">
              <el-input
                v-model="form3.otherCoefficient"
                placeholder=""
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="data2">
        <!-- 变量名称、变量编号、变量单位、变量值类型、数值、变量值、文本值 -->
        <el-table-column label="" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column type="selection" width="55" />
        <el-table-column label="变量名称" prop="variableName" />
        <el-table-column label="变量编号" prop="variableCode" />
        <el-table-column label="变量单位" prop="variableUnit" />
        <el-table-column
          label="变量值类型"
          prop="variableValueType"
        />
        <el-table-column label="数值" prop="variableValue" />
        <el-table-column label="变量值" prop="variableValue" />
        <el-table-column
          label="文本值"
          prop="variableTextValue"
        />
      </el-table>
      <div>
        <span class="el-icon-plus" />
        <span class="el-icon-minus" />
      </div>
      <el-input v-model="remark" type="textarea" placeholder="" />
      <el-form :model="form4" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="工艺线">
              <el-select v-model="form4.value" placeholder="">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工序线">
              <el-select v-model="form4.value" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产线">
              <el-select v-model="form4.value" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工艺线工时">
              <el-input v-model="form4.value" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工序线工时">
              <el-input v-model="form4.value" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产线工时">
              <el-input v-model="form4.value" placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标准品">
              <el-checkbox
                v-model="form.standardProducts"
                label="是"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      form: {},
      form2: {},
      form3: {},
      form4: {},
      data: [],
      data2: [],
      remark: ''
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        // console.log(newVal, oldVal);
        this.dialogVisible = newVal
      },
      deep: true,
      immediate: true
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.bom {
  width: 100%;
}
</style>
